<template>
  <div class="v-login" :style="{'min-height': minHeight + 'px'}">
    <div class="v-header-login">
      <div class="v-login-wrap">
        <img src="../assets/logo.png" alt="瑞为智慧门店" width="186" height="45" class="fl">
        <span class="v-logo-txt fl">客流数据分析</span>
      </div>
    </div>
    <div class="v-login-wrap">
      <Row class="v-row-wrap">
        <Col span="10" class="pt10"><img src="../assets/login_pic.png" width="622" height="370" alt=""></Col>
        <Col span="9" offset="5">
          <Card class="v-form-card">
            <h2>账号登录</h2>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
              <FormItem prop="username" class="mt14">
                  <Input type="text" size="large" v-model="formValidate.username" placeholder="请输入账号/用户名">
                      <Icon type="person" slot="prepend" size="18" color="#7f8490" class="ml5"></Icon>
                  </Input>
              </FormItem>
              <FormItem prop="password">
                  <Input type="password" size="large" v-model="formValidate.password" placeholder="请输入登录密码">
                      <Icon type="ios-locked" slot="prepend" size="20" color="#7f8490" class="ml5"></Icon>
                  </Input>
              </FormItem>
              <FormItem>
                  <Checkbox v-model="formValidate.isRemember">记住密码</Checkbox>
              </FormItem>
              <FormItem>
                  <Button type="primary" size="large" long @click="handleSubmit('formValidate')">登  录</Button>
              </FormItem>
           </Form>
          </Card>
        </Col>
      </Row>
    <div class="v-footer">版权所有：厦门瑞为信息技术有限公司；数据来源：店客云及</div>
    </div>
  </div>
</template>

<script>
let Base64 = require('js-base64').Base64
export default {
  name: "v-login",
  props: {
  },
  data () {
    return {
      minHeight: 800,
      formValidate: {
        username: '',
        password: '',
        isRemember: false
      },
      ruleValidate: {
        username: [
          { required: true, message: '请输入账号/用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '登录密码不少于6个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    let allHeight = document.documentElement.clientHeight
    this.minHeight = allHeight
    const that = this;
    window.onresize = function temp() {
       let allHeight = document.documentElement.clientHeight
      this.minHeight = allHeight
    }
  },
  created () {
    document.onkeydown = (e) => {
      let key = window.event.keyCode
      if (key === 13) {
        this.handleSubmit('formValidate')
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let params = {
            username: this.formValidate.username,
            password: Base64.encode(this.formValidate.password),
            // password: this.formValidate.password,
            isRemember: this.formValidate.isRemember
          }
          this.$store.dispatch('Login', this.$qs(params)).then((res) => {
            if (res.success === '1') {
              this.$store.dispatch('SaveToken', res.data.username)
              this.$router.push({ name: 'home' })
            } else {
              this.$Modal.error({
                title: '提示信息',
                content: res.message
              })
            }
          }).catch(err => {
            this.$message.error(err) //登录失败提示错误
          })
        }
      })
    }
  }
};
</script>

<style lang="less">
  .v-login {
    background: #161735 url('../assets/bg_login.jpg') no-repeat center center;
    .ivu-input-group-large .ivu-input, .ivu-input-group-large>.ivu-input-group-append, .ivu-input-group-large>.ivu-input-group-prepend {
      height: 46px;
    }
    .ivu-input-group-append, .ivu-input-group-prepend {
      background-color: #fff;
    }
    .ivu-input {
      border-left: none;
      transition: none;
    }
    .ivu-input:focus,
    .ivu-form-item-error .ivu-input:hover,
    .ivu-form-item-error .ivu-input:focus {
      background-color: transparent;
      box-shadow: none;
    }
    .ivu-input:hover,
    .ivu-input:focus {
      border-color: #dddee1;
    }
    .ivu-form-item-error .ivu-input:hover,
    .ivu-form-item-error .ivu-input:focus {
      border-color: #ed3f14;
    }
    .pt10 {
      padding-top: 10px;
    }
    .ml5 {
      margin-left: 5px;
    }
    .mt14 {
      margin-top: 14px;
    }
    .ivu-card-body {
      padding: 25px 42px 0;
    }
    .v-login-wrap {
      width: 1366px;
      margin: auto;
    }
    .ivu-form-item {
      // margin-bottom: 14px;
    }
    .v-header-login {
      padding-top: 30px;
      height: 68px;
      border-bottom: 1px solid #1d285a;
      img {
        display: block;
        margin-top: -18px;
      }
      .v-logo-txt {
        height: 21px;
        line-height: 18px;
        font-size: 21px;
        color: #e6e9ff;
        border-left: 1px solid #43537f;
        margin-left: 14px;
        padding-left: 14px;
        // margin-top: 25px;
      }
    }
    .v-row-wrap {
      width: 1110px;
      padding-top: 50%;
      margin: -470px auto 0;
    }
    .v-form-card {
      width:340px;
      height: 400px;
      h2 {
        font-size: 18px;
        color: #333;
      }
    }
    .v-footer {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 12px;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        color:#a7a7ae;
    }
  }
</style>
